<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #verification{
            margin-top: 10px;
            display: inline-block;
            width: 80px;
            height: 40px;
            background: yellow;
            font:bold 20px/40px '宋体';
            text-align: center;
            letter-spacing: 4px;
        }
        #btn{
            display:inline-block;
            width: 80px;
            height: 40px;
            background: yellow;
            font:bold 20px/40px '宋体';
            text-align: center;
            letter-spacing: 4px;
        }
    </style>
</head>
<body>
    <form action="">
        帐号<input type="text">
        密码<input type="password">
        <br>
        <input type="text" placeholder="请输入验证码" id="num"> <span id="verification"></span> <span id="btn">换一张</span>
       
        <br>
        <input type="submit" value="登录" id="login">
        
    </form>
    <script>
        var num = document.getElementById('num')
        var verification = document.getElementById('verification')
        var btn = document.getElementById('btn')
        var login = document.getElementById('login')
        
        // var num = parseInt(Math.random() * 11)

        function fun () {
            return parseInt(Math.random() * 9000 + 1000)
        }

        verification.innerHTML = fun();

        btn.onclick = function(){
            verification.innerHTML = fun();        
        }
       
        login.onclick = function(){
            if(num.value !== verification.innerHTML){
                alert('!!请输入正确验证码')
            }
        }
    </script>
</body>
</html>